import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { AtButton, AtAvatar } from 'taro-ui'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'
import TabBar from "../../common/taBar";
import { APIBASEURL } from '../../constants/global.js'
import moment from 'moment'

//就诊费用
import Taro from '@tarojs/taro';


export default class Index extends Component {
  state = {//内置变量
    currentUser: {},
    medicineList: []
  }

  componentWillMount(){
    console.log("will show ui");
    Taro.getStorage({
      key: 'openid',
      success: (res)=>{
        const openid=res.data;
        // console.log("current user's openid: "+openid);
        Taro.request({
          url: `${APIBASEURL}user/getUserDetails?openId=${openid}`,
          header: {
            'content-type': 'application/json'
          },
          method: 'GET',
          dataType: 'json',
          credentials: 'include',
          success: (res)=>{
            const user=res.data;
            // console.log(user);
            if(user.length!=0){
              this.setState({
                currentUser: user
              });
              // console.log(user.idcardNo);
              
              this.getMedicineRecords(user.idcardNo);
              // this.getMedicineRecords("130111201101118547");  //测试用
            }else{
              console.log("please login....");
            }
          }
        })
      }
    })
  }

  getMedicineRecords(idCardNo){
    Taro.request({
      url: `${APIBASEURL}findMedRecords?idCardNo=${idCardNo}`,
      header: {
        'content-type': 'application/json'
      },
      success: res=>{
        // console.log(res.data);
        if(res.data.length!=0){
          this.setState({
            medicineList: res.data
          })
        }else{
          console.log("you havn't medicine records.....")
        }
      }
    })
  }

  shouldComponentUpdate(nextProps, nextState) {//更改即将发生时候执行
    if (nextState.medicineList.length>0||nextState.currentUser!=null)
      return true;//因为dom渲染完成时，state异步请求的数据还没拿到，所以当数据拿到时再去更新一次dom
    else
      return false;//表示该更改state变量的动作失效
  }


  render() {
    let user=this.state.currentUser;
    let medicineList=this.state.medicineList;
    return (
      <View className='index'>

        <view className='table-card' >
          <view className='patien-name'><Text>患者姓名：</Text><Text>{user.name}</Text></view>

          <View className='at-row title'>
            <View className='at-col'>患者姓名</View>
            <View className='at-col'>就诊日期</View>
            <View className='at-col'>操作</View>
          </View>
          {
            medicineList.map((item,index)=>{
              return(
                  <View className='at-row table-td-wi' key={index}>
                    <View className='at-col'>{user.name}</View>
                    <View className='at-col'>{moment(item.visitDtime).format('YYYY-MM-DD')}</View>
                    <View className='at-col'><Text>查看</Text></View>
                  </View>
              )
            })
          }
        </view>
        <TabBar tabBarCurrent={3} />
      </View>
    )
  }
}
